<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;left:20px;top:20px;"></div>
  </div>
</template>

<script>
import * as VTable from '@visactor/vtable';
import { InputEditor } from '@visactor/vtable-editors';
import { AddRowColumnPlugin, ColumnSeriesPlugin, RowSeriesPlugin, HighlightHeaderWhenSelectCellPlugin, ExcelEditCellKeyboardPlugin, PasteAddRowColumnPlugin } from "@visactor/vtable-plugins";
const input_editor = new InputEditor();
VTable.register.editor('input', input_editor);
export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
     tableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.createTable()
  },
  methods: {
    getData(){
      return [
        ['姓名', '年龄', '地址'],
        ['张三', 18, '北京'],
        ['李四', 20, '上海'],
        ['王五', 22, '广州'],
        ['赵六', 24, '深圳'],
        ['孙七', 26, '成都']
      ]
    },
    createTable() {
      const addRowColumn = new AddRowColumnPlugin({
        addColumnCallback: col => {
          // 新增列时，重置列数
          columnSeries.resetColumnCount(columnSeries.pluginOptions.columnCount + 1);
          // 将table实例中的数据源records每一个数组中新增一个空字符串，对应新增的列
          const newRecords = tableInstance.records.map(record => {
            if (Array.isArray(record)) {
              record.splice(col - 1, 0, '');
            }
            return record;
          });
          tableInstance.setRecords(newRecords);
        },
        addRowCallback: row => {
          // 新增行时，填充空行数据
          tableInstance.addRecord([], row - tableInstance.columnHeaderLevelCount);
        }
      });
      const columnSeries = new ColumnSeriesPlugin({
        columnCount: 26,
        autoExtendColumnTriggerKeys: ['ArrowRight', 'Tab']
      });
      const rowSeries = new RowSeriesPlugin({
        rowCount: 100,
        autoExtendRowTriggerKeys: ['ArrowDown', 'Enter'],
        //records数据以外 填充空行数据
        fillRowRecord: index => {
          return [];
        },
        rowSeriesNumber: {
          width: 'auto'
        }
      });
      const highlightPlugin = new HighlightHeaderWhenSelectCellPlugin({
        colHighlight: true,
        rowHighlight: true
      });
      const excelEditCellKeyboardPlugin = new ExcelEditCellKeyboardPlugin();
      const pasteAddRowColumnPlugin = new PasteAddRowColumnPlugin({
        addColumnCallback: col => {
          // 新增列时，重置列数
          columnSeries.resetColumnCount(columnSeries.pluginOptions.columnCount + 1);
          // 将table实例中的数据源records每一个数组中新增一个空字符串，对应新增的列
          const newRecords = tableInstance.records.map(record => {
            if (Array.isArray(record)) {
              record.splice(col - 1, 0, '');
            }
            return record;
          });
          tableInstance.setRecords(newRecords);
        }
      })
      const option = {
        container: this.$refs.table,
        records: this.getData(),
        padding: 30,
        editor: 'input',
        editCellTrigger: ['api', 'keydown', 'doubleclick'], // 编辑单元格触发方式
        select: {
          cornerHeaderSelectMode: 'body',
          headerSelectMode: 'body'
        },
        theme: VTable.themes.DEFAULT.extends({
          defaultStyle: {
            textAlign: 'left',
            padding: [2, 6, 2, 6]
          },
          headerStyle: {
            textAlign: 'center'
          }
        }),
        frozenColCount: 1,
        defaultRowHeight: 30,
        keyboardOptions: {
          moveFocusCellOnEnter: true,
          copySelected: true,
          pasteValueToCell: true
        },
        plugins: [
          addRowColumn,
          columnSeries,
          rowSeries,
          highlightPlugin,
          excelEditCellKeyboardPlugin,
          pasteAddRowColumnPlugin
        ]
      }
      this.tableInstance = new VTable.ListTable(option);
    }
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
